<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/axios.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 1000px;
            margin: 0 auto;
        }
        .item{
            margin-top: 10px;
            height: 150px;
            width: 1000px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <a href="./page/shoucang.html">我的收藏</a>
    <div class="box">
        <!-- <div class="item">
            <img src="" alt="">
            <div>
                <p>javascript高级程序设计</p>
                <p>老外</p>
                <p>学会他,走上人生巅峰,天天去蹦迪</p>
                <p>2021-09-02</p>
            </div>
            <div>
                <p>1000000票</p>
                <button>书籍详情</button>
                <button>加入书架</button>
            </div>
        </div>
        <div class="item">
            <img src="" alt="">
            <div>
                <p>javascript高级程序设计</p>
                <p>老外</p>
                <p>学会他,走上人生巅峰,天天去蹦迪</p>
                <p>2021-09-02</p>
            </div>
            <div>
                <p>1000000票</p>
                <button>书籍详情</button>
                <button>加入书架</button>
            </div>
        </div>
        <div class="item">
            <img src="" alt="">
            <div>
                <p>javascript高级程序设计</p>
                <p>老外</p>
                <p>学会他,走上人生巅峰,天天去蹦迪</p>
                <p>2021-09-02</p>
            </div>
            <div>
                <p>1000000票</p>
                <button>书籍详情</button>
                <button>加入书架</button>
            </div>
        </div> -->

    </div>

    <script>

        // 请求数据 , 所有书籍的数据
        axios.get('/allBooks').then(result => {
            console.log(result.data);
            render(result.data)
        });

        let box = document.querySelector('.box');
        function render(arr){
            box.innerHTML = arr.map(item => {
                return `<div class="item">
                            <img src="${item.img}" alt="">
                            <div>
                                <p>${item.name}</p>
                                <p>${item.author}</p>
                                <p>${item.info}</p>
                                <p>${item.lTime}</p>
                            </div>
                            <div>
                                <p>${item.count}票</p>
                                <button class='a'>书籍详情</button>
                                <button class='b' ${item.isLike ? 'disabled' : ''}>${item.isLike ? '已收藏' : '加入书架'}</button>
                            </div>
                        </div>`
            }).join('');
        }

        // 给书籍详情 , 加入书架 添加点击事件 . 事件委托
        box.onclick = function(e){
            let tar = e.target;
            if(tar.innerHTML === '书籍详情'){
                // 获取下标 
                let index = [...box.children].indexOf(tar.parentNode.parentNode);
                // 存储到本地
                localStorage.setItem('index', index);
                // 跳转页面
                location.href = './page/detail.html';
            }
            if(tar.innerHTML === '加入书架'){
                tar.innerHTML = '已加入书架';
                tar.disabled = true;

                // 加入书架逻辑 -> 把书的下标 发送给服务器 -> 服务器把下标,存到单独的文件中保存.
                // 获取下标 
                let index = [...box.children].indexOf(tar.parentNode.parentNode);
                axios.get(`/likeBook/index/${index}`).then(result => {

                })

            }

        }
        
       


    </script>
</body>
</html>